<template>
<div>
  <h1>风力发电机</h1>
  <div id="main"></div>
</div>
</template>
import * as THREE from "three";
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
<script>
import * as THREE from "three";

export default {
  data(){
    return{
      scene:null,
      camera:null,
      renderer:null,
    }
  },
  mounted(){
  this.init() //初始化
  },
  methods:{
    init:function(){
      //  场景对象Scene  相机对象camera 渲染器对象 renderer
      this.scene = new THREE.Scene();
      //创建模型放入场景中
     /*
     * ConeGeometry圆锥缓冲几何体
     * 参数1  radius 圆锥底部的半径, 默认值为1
     * 参数2  height 圆锥的高度默认值为1
     * 参数3  radialSegments  圆锥侧面周围的分段数，默认为8
     * **/
      const geometry = new THREE.ConeGeometry( 5, 20, 32 );
      const material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
      const cone = new THREE.Mesh( geometry, material );
      this.scene.add( cone );
      this. camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);// 透视相机
      this. renderer = new THREE.WebGLRenderer();
    }
  }
}
</script>
<style lang="less" scoped>
.main{
  width: 100%;
  height: 800px;
}
</style>